<template>
  <!--pages/login/login.wxml-->
  <view class="login-container">
    <image class="logo" src="/static/images/logo@2x.png" alt />
    <text class="title">蘑菇在线</text>
    <image class="login-tips" src="/static/images/login_tips@2x.png" alt />
    <button open-type="getUserInfo" @getuserinfo="wxLogin" plain class="wx-login-button">
      <image class="wx-login-img" src="/static/images/wx_login@2x.png" alt />
    </button>
    <text class="phone-login" @click="wxPhoneLogin">手机号登录</text>
    <text class="bottom-tip">Copyright © 2020 蘑菇在线</text>
  </view>
</template>
<script>
import request from "../../utils/request";
export default {
  methods: {
    // 登录
    wxLogin(e) {
      // console.log(e);
      if (e.detail.errMsg === "getUserInfo:fail auth deny") return;
      const { nickName: nickname, avatarUrl: avatar } = e.detail.userInfo;
      uni.login({
        async success({ code }) {
          const res = await request({
            url: "user/wxlogin",
            method: "POST",
            data: { nickname, avatar, code },
            tip: "登录中......",
          });
          // console.log(res);
          if (res.data.status === 0) {
            uni.showToast({
              title: res.data.message,
              icon: "none",
              duration: 2000,
              success: () => {
                uni.reLaunch({
                  url: "/pages/home/index",
                });
              },
            });
            uni.setStorageSync("token", res.data.token);
          }
        },
      });
    },
    // 手机号登录
    wxPhoneLogin() {
      uni.navigateTo({
        url: "/pages/phone-login/index",
      });
    },
  },
};
</script>
<style lang="less" scoped >
/* pages/login/login.wxss */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.login-container .logo {
  margin-top: 180rpx;
  width: 212rpx;
  height: 212rpx;
}

.login-container .title {
  color: #333;
  font-size: 24px;
  margin-top: 20rpx;
}

.login-container .login-tips {
  margin-top: 30rpx;
  height: 34rpx;
  width: 292rpx;
  position: relative;
}

.login-container .wx-login-button {
  margin-top: 200rpx;
  width: 568rpx;
  height: 98rpx;
  padding: 0;
  border: none;
}

.login-container .wx-login-img {
  width: 568rpx;
  height: 98rpx;
}

.phone-login {
  margin-top: 40rpx;
  color: #333;
  font-size: 15px;
}

.login-container .bottom-tip {
  color: #a8a8a8;
  font-size: 10px;
  position: absolute;
  bottom: 40rpx;
}
</style>